<template>
  <div>
    <a-button @click="showDlg = true">高级查询</a-button>
    <a-modal
      width='40%'
      :visible="showDlg"
      @ok="showDlg = false"
      @cancel="showDlg = false"
      title="查找"
    >
      <a-input-search
        placeholder="查找设备id或设备名称或设备ip"
        enter-button
        @search="onSearch"
        v-model="searchText"
      />
      <a-table :dataSource="devs" rowKey="uid" :columns="columns">
        <template slot="action" slot-scope="text, record">
          <a @click="goto(record)"> <a-icon type="enter" /></a>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>
<script>
import { queryThing } from "@/services/things.js";
const columns = [
  {
    title: "设备名称",
    dataIndex: "s_name",
    key: "name",
    scopedSlots: { customRender: "name" },
  },
  {
    title: "id",
    dataIndex: "uid",
    key: "uid",
    ellipsis: true,
    width: 80,
  },
  {
    title: "站点名称",
    dataIndex: "station_name",
    ellipsis: true,
  },
  {
    title: "IP",
    dataIndex: "ip",
    width: 120,
    ellipsis: true,
  },
  {
    title: "物模型",
    dataIndex: "model_name",
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  data() {
    return {
      showDlg: false,
      searchText: "",
      devs: [],
      columns,
    };
  },
  methods: {
    onSearch() {
      let self = this;
      queryThing(this.searchText).then((res) => {
        if (res) {
          self.devs = res;
        }
      });
    },
    goto(item) {
      //let sid = item.station_id
      if (item) {
        console.log("*******************sid", item);
        this.$emit("gotoItem", item);
      }
    },
  },
};
</script>